import Navbar from "@/components/Navbar"
import styles from './index.module.scss'
import Input from '@/components/Input/'
import { useFormik } from 'formik';
import * as Yup from 'yup';
import classNames from "classnames";
import { useDispatch } from "react-redux";
import { getCode, login } from "../../store/actions/login";
import { Toast } from "antd-mobile";
import { useState } from "react";
import { useHistory, useLocation } from "react-router-dom";
export default function Login() {
    const [time, setTime] = useState(0)
    const dispatch = useDispatch()
    const location = useLocation()
    const history = useHistory()
    const formik = useFormik({
        initialValues: {
            mobile: '13911111111',
            code: '246810'
        },
        // 提交登陆
        onSubmit: async values => {
            await dispatch(login(values))
            const pathname = location.state ? location.state.from : '/home'
            history.replace(pathname)
        },
        validationSchema: Yup.object({
            mobile: Yup.string().required('手机号不能为空').matches(/^1[3456789]\d{9}$/, '手机号格式错误'),
            code: Yup.string().required('验证码不能为空').matches(/\d{6}/, '验证码格式错误')
        })
    })
    const {
        values: { mobile, code },
        handleChange,
        handleSubmit,
        handleBlur,
        errors,
        touched,
        isValid
    } = formik
    // 获取验证码
    const extraClick = async () => {
        if (!/^1[3456789]\d{9}$/.test(mobile)) {
            formik.setTouched({
                mobile: true
            })
            return
        }
        await dispatch(getCode(mobile))
        Toast.show({
            icon: 'success',
            content: '发送成功',
            maskClickable: false,
            duration: 1000
        })
        setTime(3)
        let timeId = setInterval(() => {
            setTime((time) => {
                if (time === 1) {
                    clearInterval(timeId)
                }
                return time - 1
            })
        }, 1000);
    }
    return (
        <div className={styles.root}>
            <Navbar>登陆</Navbar>
            <div className="content">
                <h3>登陆信息</h3>
                <form onSubmit={handleSubmit}>
                    <div className="input-item">
                        <Input
                            id="mobile"
                            name="mobile"
                            placeholder='请输入手机号' type="text"
                            onChange={handleChange}
                            value={mobile}
                            autoComplete="off"
                            onBlur={handleBlur}
                            maxLength={11}
                        ></Input>
                        {errors.mobile && touched.mobile ? <div className="validate">{errors.mobile}</div> : null}
                    </div>
                    <div className="input-item">
                        <Input placeholder='请输入验证码'
                            id="code"
                            name="code"
                            type="text"
                            extraName={time <= 0 ? '发送验证码' : `${time}s后再试`}
                            extraClick={extraClick}
                            onChange={handleChange}
                            value={code}
                            onBlur={handleBlur}
                            maxLength={6}
                        ></Input>
                        {errors.code && touched.code ? <div className="validate">{errors.code}</div> : null}
                    </div>
                    <button type="submit" className={classNames('login-btn', { disabled: !isValid })} disabled={!isValid}>确认登陆</button>
                </form>
            </div>
        </div>
    )
}
